<template>
	<view>
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="shorCarBox">
					<view class="imgBox">
						<u--image :showLoading="true"
							src="https://www.tdtye.com/files/vegetable_mall_file/default/shorCarLogo.png" width="100rpx"
							height="90rpx" shape="square" radius="10">
						</u--image>
					</view>
					<view class="rightBox">
						<view class="price">
							￥{{totalPrice}}
							<text style="font-size: 20rpx;color: #ff8d8d;" v-if="freight">含运费{{freight}}元</text>
						</view>
						<view class="payBtn">
							<u-button text="去支付" type="warning" shape="circle" @click="goPay()"></u-button>
						</view>
					</view>
				</view>
				<view class="backImg">
					<u--image :src="imgApi+plotDetail.banner" mode="widthFix" width="750rpx" :showLoading="true" />
				</view>
				<view class="plotBox">
					<view class="plotTitle">
						<view>
							<u--text :text="plotDetail.plotName" :lines="1" bold></u--text>
						</view>
						<view>
							<u--image :src="imgApi+plotDetail.avatar" mode="widthFix" width="150rpx" height="150rpx"
								shape="square" radius="10" showLoading />
						</view>
					</view>
					<view class="plotTime">
						<u-line length="64%"></u-line>
						<view class="time">
							<view v-if="plotDetail.businessType==0||plotDetail.businessType==2">
								<text>采摘时间:</text>
								<text>{{plotDetail.pickOpenTime}} —— {{plotDetail.pickOverTime}}</text>
							</view>
							<view v-if="plotDetail.businessType==1||plotDetail.businessType==2">
								<text>种植时间:</text>
								<text>{{plotDetail.growOpenTime}} —— {{plotDetail.growOverTime}}</text>
							</view>
						</view>
						<view class="phoeAddress">
							<view style="display: flex;">
								<text>电话:</text>
								<text>{{plotDetail.phone}}</text>
								<view style="margin-left: auto;position: relative;top: -20rpx;">
									<u-button text="致电" size="mini" type="primary" @click="callPhone()"></u-button>
								</view>
							</view>
							<view>
								<view style="display: flex;position: relative;top: -15rpx;">
									<view style="display: flex;">
										<view style="width: 100rpx;">
											<text>详细地址:</text>
										</view>
										<view style="width: 300rpx;">
											<u--text :text="plotDetail.address" size="11px" :lines="1" color="#7f8c8d">
											</u--text>
										</view>
									</view>
									<view style="margin-left: auto;">
										<u-button text="导航" size="mini" type="warning" @click="handleMapLocation()">
										</u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="carListBox">
					<u-read-more ref="uReadMore" :toggle="true" textIndent="0em" :closeText="`展开(共${shopCar.length}件)`"
						:openText="`收起(共${shopCar.length}件)`" color="#7f8c8d" showHeight="600rpx">
						<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" v-if="shopCar.length==0"
							width="200rpx">
						</u-empty>
						<view class="carBox" v-for="(item,index) in shopCar">
							<view class="leftBox">
								<u--image :src="imgApi+item.avatar" mode="aspectFit" width="150rpx" height="150rpx"
									shape="square" radius="10" showLoading></u--image>
							</view>
							<view class="rightBox">
								<view>
									<u--text :text="item.title" :lines="1"></u--text>
								</view>
								<view style="display: flex;">
									<view style="width: 100rpx;">
										<u-tag text="采摘价" type="success" v-if="item.specialType==0" size="mini"></u-tag>
										<u-tag text="种植价" v-if="item.specialType==1" size="mini"></u-tag>
									</view>
									<view style="width: 100rpx;margin-left: 10rpx;">
										<u-tag text="可快递" type="success"
											v-if="$comm.checkNull(item.hasCourier)&&item.hasCourier==1&&item.specialType==0"
											size="mini" plain=""></u-tag>
									</view>
								</view>
								<view style="margin-top: 15rpx;display: flex;">
									<view>
										<text style="font-size: 20rpx;">￥</text>
										<text style="font-size: 40rpx;">{{item.price}}</text>
									</view>
									<view style="margin-left: auto;display: flex;z-index: 0;">
										<view class="changeBtn" @click="changeVegetable(item,-1)">
											<u--image
												src="https://www.tdtye.com/files/vegetable_mall_file/default/minus.png"
												width="46rpx" height="46rpx" :fade="false">
											</u--image>
										</view>
										<text slot="input" style="width: 70rpx;text-align: center;"
											class="input">{{item.count}}</text>
										<view class="changeBtn" @click="changeVegetable(item,1)">
											<u--image
												src="https://www.tdtye.com/files/vegetable_mall_file/default/add.png"
												width="46rpx" height="46rpx" :fade="false">
											</u--image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-read-more>
				</view>
				<view class="remark">
					<view style="display: flex;margin-bottom: 30rpx;justify-content: space-between;" v-if="takeShow">
						<text style="font-size: 30rpx;">采摘单是否自提</text>
						<text class="remarkTwoTitle">如购物车都是种植单则无需选择</text>
						<view style="padding: 0rpx 30rpx;">
							<u-switch space="2" v-model="hasTake" activeColor="#4cd137"
								inactiveColor="rgb(230, 230, 230)" :activeValue="1" :inactiveValue="0">
							</u-switch>
						</view>
					</view>

					<view style="display: flex;margin-bottom: 30rpx;justify-content: space-between;" v-if="courierShow">
						<text style="font-size: 30rpx;">是否快递</text>
						<text class="remarkTwoTitle">该批次中可发快递的果蔬会快递运送到您家中</text>
						<view style="padding: 0rpx 30rpx;">
							<u-switch space="2" v-model="hasAddress" activeColor="#4cd137"
								inactiveColor="rgb(230, 230, 230)" @change="changeAddress">
							</u-switch>
						</view>
					</view>
					<view style="display: flex;margin-bottom: 30rpx;justify-content: space-between;" v-if="hasAddress"
						@click="getaddress">
						<u-icon name="car-fill" color="#2980b9" size="28"></u-icon>
						<text style="margin-left: 10rpx;line-height: 50rpx;">{{form.delivery}}</text>
					</view>
					<view style="display: flex;">
						订单备注
						<view style="margin-left: auto;width: 400rpx;">
							<u--input placeholder="有需要注意的事情在此输入" border="none" v-model="remark" showWordLimit
								maxlength="50" type="text"></u--input>
						</view>
					</view>
				</view>
				<view style="height: 150rpx;">

				</view>
			</block>
		</skeleton>
	</view>

</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		components: {
			Skeleton,
		},
		data() {
			return {
				form: {
					delivery: "选择您的收货地址"
				},
				freight: "",
				hasAddress: false,
				hasCourier: false,
				courierShow: false,
				takeShow: false,
				hasTake: 0,
				remark: "",
				totalPrice: "",
				shopCar: "",
				imgApi: this.$reqConfig.URLIMAGE,
				plotId: "",
				params: {
					pageNo: 1,
					pageSize: 10
				},
				totalPrice: 0,
				plotDetail: {},
				loading: true,
				skeleton: [
					'square+line*3',
					'square+line*3',
					'square+line*3'
				], //骨架屏
				selectIndex: null,
			}
		},

		onShow() {

		},
		onLoad(e) {
			console.log("e: ", e);
			this.imgApi = this.$reqConfig.URLIMAGE
			this.plotId = e.id
			this.plotInfo()
			this.shopList()
			this.shorCarTotalAmount()
		},
		methods: {
			changeAddress(e) {
				console.log("e: ", e);
				if (!e) {
					this.form = {
						delivery: "选择您的收货地址"
					}
				}
			},
			getaddress() {
				let that = this
				uni.chooseAddress({
					success(res) {
						that.form.province = res.provinceName
						that.form.city = res.cityName
						that.form.area = res.countyName
						that.form.address = res.detailInfo
						that.form.name = res.userName
						that.form.phone = res.telNumber
						that.form.delivery = that.form.province + that.form.city + that.form.area + that.form
							.address
						that.shorCarTotalAmount()

					}
				})
				console.log("that.delivery:", that.delivery);
			},
			//微信支付
			weChatPay(orderNum) {
				this.$axios({
					url: "wx/pay/createJsApiOrder",
					method: "post",
					data: {
						orderNum: orderNum,
						type: 7
					}
				}).then((response) => {
					let that = this
					uni.hideLoading()
					if (response.code == 0) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
							nonceStr: response.result.nonceStr, // 随机字符串
							package: response.result.packageValue, // 固定值
							signType: response.result.signType, //固定值
							paySign: response.result.paySign, //签名
							success: function(response) {
								uni.showToast({
									title: '支付成功！',
									icon: "none",
								})
								if (that.hasTake == 1) {
									that.dingyue()
								}
								//跳转到订单列表
								uni.redirectTo({
									url: "/pages/mine/order"
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败,请在订单列表处重新支付',
									icon: "none",
								})
								//跳转到订单列表
								uni.redirectTo({
									url: '/pages/mine/order'
								})
							},
						});
					}
				})
			},
			dingyue() {
				//获取订阅消息权限
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['JnkhTGuxOZjmCqlHE5KdZsgfYk79cs-kIuCb7IzQDmc'],
				})
			},
			goPay() {
				if (this.shopCar.length == 0) {
					uni.showToast({
						icon: 'none',
						title: "购物车还未添加果蔬哦~"
					})
					return;
				}
				uni.showLoading({
					icon: "none",
					title: "订单创建中......"
				})
				this.$axios({
					url: "user/usShopCar/settlement",
					method: "post",
					data: {
						plotId: this.plotId,
						type: 3,
						remark: this.remark,
						hasTake: this.hasTake
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.hideLoading()
						uni.showToast({
							title: "订单提交成功",
							icon: 'none',
						})
						this.weChatPay(res.result)
					}
				})
			},
			//获取购物车总价
			shorCarTotalAmount() {
				this.$axios({
					url: "user/usShopCar/shopCarTotalAmount",
					method: "post",
					data: {
						plotId: this.plotId,
						area: this.form.area
					}
				}).then((res) => {
					if (res.code == 0) {
						if (this.$comm.checkNull(res.result.amount.max)) {
							this.freight = res.result.amount.max
							this.totalPrice = res.result.amount.amount + this.freight
						} else {
							this.totalPrice = res.result.amount

						}
					}
				})
			},
			//计算总价
			calculatePrice(item, type) {
				if (type == 1) {
					this.totalPrice = this.totalPrice + item.price
				} else {
					if (this.totalPrice > 0.00) {
						this.totalPrice = this.totalPrice - item.price
					}
				}
				if (this.totalPrice > 0.00) {
					item.count = +(Number(item.count * 100) / 100).toFixed(2)
					this.totalPrice = +(Number(this.totalPrice * 100) / 100).toFixed(2)
				}
			},
			//购物车更改
			changeVegetable(item, type) {
				uni.showLoading({
					title: "提交中..."
				})
				this.$axios({
					url: "user/usShopCar/add",
					method: "post",
					data: {
						id: item.goodsId,
						status: type,
						type: 3,
						merchantId: item.merchantId,
						specialType: item.specialType,
						plotId: item.plotId
					}
				}).then((res) => {
					if (res.code == 0) {
						if (type == 1) {
							item.count++
						} else {
							if (item.count <= 1) {
								this.shopCar.splice(this.shopCar.findIndex(current => item.id == current.id), 1)
							} else {
								item.count--
								if (item.count < 1) {
									this.shopCar.splice(this.shopCar.findIndex(current => item.id == current.id),
										1)
								}
							}
						}

						this.totalPrice = res.result
						item.count = +(Number(item.count * 100) / 100).toFixed(2)
						this.$forceUpdate()
						uni.hideLoading()
					}
				})
			},
			plotInfo() {
				let dingwei = uni.getStorageSync("dingwei");
				this.$axios({
					url: "user/public/plot/detail",
					method: "post",
					data: {
						id: this.plotId,
						lat: dingwei.latitude,
						lng: dingwei.longitude
					}
				}).then((res) => {
					this.plotDetail = res.result
				})
			},
			shopList() {
				this.$axios({
					url: "user/usShopCar/list",
					method: "post",
					data: {
						type: 3,
						plotId: this.plotId
					}
				}).then((res) => {
					this.shopCar = res.result.list
					this.shopCar.forEach(item => {
						if (item.specialType == 0) {
							console.log("item: ", item);
							this.takeShow = true
						}
						if (this.$comm.checkNull(item.hasCourier) && item.hasCourier == 1 && item
							.specialType == 0) {
							this.courierShow = true
						}
					})
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
					})
					this.loading = false
				})
			},
			// 打电话
			callPhone() {
				console.log("123: ", 123);
				uni.makePhoneCall({
					phoneNumber: this.plotDetail.phone //仅为示例
				});
			},
			// 导航
			handleMapLocation() {
				if (!this.plotDetail.address) {
					uni.showToast({
						title: "商家未填地址",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "加载中"
				})
				let address = this.plotDetail.address
				// 获取定位信息				
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						if (res.errMsg == "getLocation:ok") {
							uni.openLocation({
								// 传入你要去的纬度
								latitude: res.latitude,
								// 传入你要去的经度
								longitude: res.longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 10,
								success: function() {
									uni.hideLoading()
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						uni.hideLoading()
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.changeBtn {
		display: flex;
		width: 80rpx;
		justify-content: center;
	}

	.backImg {
		position: absolute;
	}

	.remark {
		// display: flex;
		// height: 120rpx;
		background-color: #fff;
		border-radius: 25rpx;
		margin: 30rpx 25rpx 25rpx 25rpx;
		padding: 35rpx;

		.remarkTwoTitle {
			font-size: 16rpx;
			line-height: 29px;
			color: #8c8c8c;
			padding: 0rpx 10rpx;
			margin-right: auto;
		}
	}

	.carListBox {
		// min-height: 300rpx;
		// height: 300rpx;
		padding: 15rpx;
		position: relative;
		width: 625rpx;
		background-color: #fff;
		margin: 100rpx 20rpx 0rpx 46rpx;
		border-radius: 25rpx;

		.carBox {
			display: flex;
			margin: 25rpx 30rpx;
			height: 150rpx;

			.leftBox {
				width: 150rpx;
				height: 150rpx;
			}

			.rightBox {
				margin-left: 20rpx;
				width: 700rpx;
			}
		}
	}

	.plotBox {
		position: relative;
		background-color: #fafafa;
		width: 650rpx;
		height: 300rpx;
		margin: 0rpx 50rpx;
		top: 80rpx;
		border-radius: 25rpx;

		.plotTitle {
			display: flex;
			padding: 30rpx 65rpx;
			line-height: 85rpx;
			justify-content: space-between;
			font-size: 35rpx;
			font-weight: 900;
		}

		.plotTime {
			position: relative;
			bottom: 50px;
			margin: 0rpx 50rpx;

			.time {
				font-size: 11px;
				margin-top: 15rpx;
			}

			.phoeAddress {
				color: #7f8c8d;
				margin-top: 30rpx;
				font-size: 20rpx;
			}
		}
	}

	.shorCarBox {
		display: flex;
		width: 100%;
		height: 135rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		z-index: 999;

		.rightBox {
			display: flex;
			margin-left: auto;
			padding: 10rpx 36rpx;

			.price {
				line-height: 45rpx;
				font-size: 45rpx;
				padding: 28rpx 10rpx;
				color: #e80c0c;
			}

			.payBtn {
				padding: 10rpx;
				width: 170rpx;
			}
		}

		.imgBox {
			padding: 10rpx 50rpx;
		}
	}
</style>
